<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>申请课题修改课题</title>
	<link rel="stylesheet" href="../stylesheets/common.css" />
	<link rel="stylesheet" href="../stylesheets/table.css" />
	<style>
		.zcdgl {
			border: none;
		}
		
		.zcdgl .ext-move-up,
		.zcdgl .ext-move-down {}
		
		.zcdgl .ext-node .action {
			width: 20px;
			text-align: center;
			opacity: 0.8;
			display: none;
			text-indent: 0px;
		}
		
		.zcdgl.editMode .ext-node .action {
			display: inline-block;
		}
		
		.zcdgl .ext-node .action:hover {
			opacity: 1
		}
		
		.zcdgl .iconfont {
			position: relative;
			font-size: 12px;
			line-height: 1.5;
		}
		
		.zcdgl .ext-move-up .iconfont,
		.zcdgl .ext-move-down .iconfont {
			color: #48A348;
		}
		
		.zcdgl .ext-remove .iconfont {
			color: #d9534f;
		}
		
		.zcdgl .ext-add .iconfont {
			color: #5bc0de;
		}
		
		.zcdgl .ext-content > .ext-node-container:first-child > .ext-node .ext-move-up .iconfont {
			color: silver;
		}
		
		.zcdgl .ext-content > .ext-node-container:last-child > .ext-node .ext-move-down .iconfont {
			color: silver;
		}
		
		.zcdgl .ext-child-content > .ext-node-container:first-child > .ext-node .ext-move-up .iconfont {
			color: silver;
		}
		
		.zcdgl .ext-child-content > .ext-node-container:last-child > .ext-node .ext-move-down .iconfont {
			color: silver;
		}
		/*		.zcdgl .ext-first-node .ext-move-up .iconfont {
			color: silver;
		}
		
		.zcdgl .ext-last-node .ext-move-down .iconfont {
			color: silver;
		}*/
	</style>
</head>

<body>
	<div class="place">
		<span class="label-span">位置：</span>
		<ul id="place-list" class="place-ul">
			<li>
				首页
			</li>
		</ul>
	</div>
	<div class="body-warp">
		<div class="panel">
			<div class="panel-title">
				<i class="form-icon"></i>
				<span class="title-text">基本信息</span>
			</div>
			<div class="panel-body">
				<form>
					<table class="form-table">

						<tr>
							<td>
								<label class="form-label" for="search1">课题成员<b class="red">*</b></label>
							</td>
							<td>
								<div style="border: 1px solid #DCDCDC;width:367px;max-height:400px;overflow:auto">
									<div id="tree" class="zcdgl ext-treelist" style="border:none">
									</div>
								</div>
								<div id="xuanze" style="display:none;">
									<select name="xuanze2" id="xuanze2">
										<option value="1">1条数据</option>
										<option value="2">2条数据</option>
										<option value="3">3条数据</option>
										<option value="4">4条数据</option>
									</select>
									<a id="quedingzengjia">确定增加</a>
								</div>
							</td>
						</tr>
						<tr>
							<!-- 空内容的td 保持间距 -->
							<td>
								<label class="form-label">&nbsp;</label>
							</td>
							<td>
								<input id="shengcheng" class="btn btn-success btn-large" type="button" value="根据栏目顺序自动生成">
								<input id="bianji" class="btn btn-danger btn-large" type="button" value="编辑">
								<input id="liulan" class="btn  btn-large return-btn" data-href="/manager/users" type="button" value="网站浏览">
								<input id="baocun" class="btn btn-success btn-large" type="button" value="保存" style="display:none">
								<input id="chongzhi" class="btn btn-danger btn-large" type="button" value="重置" style="display:none">
								<input id="xinzeng" class="btn  btn-large" type="button" value="新增主菜单" style="display:none">
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
	<link rel="stylesheet" href="../ext/zw/lui-v2.1/css/extension.css" />
	<script type="text/javascript" src="../ext/jquery/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../ext/zw/lui-v2.1/js/common.js"></script>
	<script type="text/javascript" src="../ext/zw/lui-v2.1/js/luicontroller-advance.js"></script>
	<script type="text/javascript" src="../ext/zw/lui-v2.1/js/tree.js"></script>
	<script type="text/javascript" src="../ext/zw/lui-v2.1/js/extension.js"></script>
	<script>
		$(function () {

			initPage();
			/* 初始化控件 */
			initWidget();

			/*侦听*/
			addListeners();



		});

		/*初始化控件*/
		function initWidget() {


		}


		function initPage() {
			var setting = {
				store: {
					data: [
						{
							name: "瓯海教育局瓯育局",
							value: "ohjyj",
							expanded: true,
							children: [{
									name: "成长小学",
									value: "ohxx",
									children: [{
											name: "莫胜利",
											value: "msl",
											children: [{
													name: "潘鹏飞",
													value: "ppf",

				},
												{
													name: "许凤平",
													value: "xfp",

				}, {
													name: "朱建伟",
													value: "zjw",

				}]
				},
										{
											name: "潘克胜",
											value: "pks",

				}, {
											name: "严听听",
											value: "ytt",

				}]
				},
								{
									name: "奋强中学",
									value: "fqzx",
									children: [{
											name: "潘鹏飞",
											value: "ppf",

				},
										{
											name: "许凤平",
											value: "xfp",

				}, {
											name: "朱建伟",
											value: "zjw",

				}]
				},
								{
									name: "自立高中",
									value: "zlgz",
									children: [{
											name: "陈冬敏",
											value: "cdm",

				},
										{
											name: "邹崇景",
											value: "zcj",

				}]
				}],
						},
						{
							name: "鹿城教育局",
							value: "ohjyj",
						},
						{
							name: "龙湾教育局",
							value: "ohjyj",
						}, {
							name: "瓯海教育局瓯育局",
							value: "ohjyj",
							expanded: true,
							children: [{
									name: "成长小学",
									value: "ohxx",
									children: [{
											name: "莫胜利",
											value: "msl",
											children: [{
													name: "潘鹏飞",
													value: "ppf",

				},
												{
													name: "许凤平",
													value: "xfp",

				}, {
													name: "朱建伟",
													value: "zjw",

				}]
				},
										{
											name: "潘克胜",
											value: "pks",

				}, {
											name: "严听听",
											value: "ytt",

				}]
				},
								{
									name: "奋强中学",
									value: "fqzx",
									children: [{
											name: "潘鹏飞",
											value: "ppf",

				},
										{
											name: "许凤平",
											value: "xfp",

				}, {
											name: "朱建伟",
											value: "zjw",

				}]
				},
								{
									name: "自立高中",
									value: "zlgz",
									children: [{
											name: "陈冬敏",
											value: "cdm",

				},
										{
											name: "邹崇景",
											value: "zcj",

				}]
				}],
						},
						{
							name: "鹿城教育局",
							value: "ohjyj",
						},
						{
							name: "龙湾教育局",
							value: "ohjyj",
						}, {
							name: "瓯海教育局瓯育局",
							value: "ohjyj",
							expanded: true,
							children: [{
									name: "成长小学",
									value: "ohxx",
									children: [{
											name: "莫胜利",
											value: "msl",
											children: [{
													name: "潘鹏飞",
													value: "ppf",

				},
												{
													name: "许凤平",
													value: "xfp",

				}, {
													name: "朱建伟",
													value: "zjw",

				}]
				},
										{
											name: "潘克胜",
											value: "pks",

				}, {
											name: "严听听",
											value: "ytt",

				}]
				},
								{
									name: "奋强中学",
									value: "fqzx",
									children: [{
											name: "潘鹏飞",
											value: "ppf",

				},
										{
											name: "许凤平",
											value: "xfp",

				}, {
											name: "朱建伟",
											value: "zjw",

				}]
				},
								{
									name: "自立高中",
									value: "zlgz",
									children: [{
											name: "陈冬敏",
											value: "cdm",

				},
										{
											name: "邹崇景",
											value: "zcj",

				}]
				}],
						},
						{
							name: "鹿城教育局",
							value: "ohjyj",
						},
						{
							name: "龙湾教育局",
							value: "ohjyj",
						}, {
							name: "瓯海教育局瓯育局",
							value: "ohjyj",
							expanded: true,
							children: [{
									name: "成长小学",
									value: "ohxx",
									children: [{
											name: "莫胜利",
											value: "msl",
											children: [{
													name: "潘鹏飞",
													value: "ppf",

				},
												{
													name: "许凤平",
													value: "xfp",

				}, {
													name: "朱建伟",
													value: "zjw",

				}]
				},
										{
											name: "潘克胜",
											value: "pks",

				}, {
											name: "严听听",
											value: "ytt",

				}]
				},
								{
									name: "奋强中学",
									value: "fqzx",
									children: [{
											name: "潘鹏飞",
											value: "ppf",

				},
										{
											name: "许凤平",
											value: "xfp",

				}, {
											name: "朱建伟",
											value: "zjw",

				}]
				},
								{
									name: "自立高中",
									value: "zlgz",
									children: [{
											name: "陈冬敏",
											value: "cdm",

				},
										{
											name: "邹崇景",
											value: "zcj",

				}]
				}],
						},
						{
							name: "鹿城教育局",
							value: "ohjyj",
						},
						{
							name: "龙湾教育局",
							value: "ohjyj",
						}, {
							name: "瓯海教育局瓯育局",
							value: "ohjyj",
							expanded: true,
							children: [{
									name: "成长小学",
									value: "ohxx",
									children: [{
											name: "莫胜利",
											value: "msl",
											children: [{
													name: "潘鹏飞",
													value: "ppf",

				},
												{
													name: "许凤平",
													value: "xfp",

				}, {
													name: "朱建伟",
													value: "zjw",

				}]
				},
										{
											name: "潘克胜",
											value: "pks",

				}, {
											name: "严听听",
											value: "ytt",

				}]
				},
								{
									name: "奋强中学",
									value: "fqzx",
									children: [{
											name: "潘鹏飞",
											value: "ppf",

				},
										{
											name: "许凤平",
											value: "xfp",

				}, {
											name: "朱建伟",
											value: "zjw",

				}]
				},
								{
									name: "自立高中",
									value: "zlgz",
									children: [{
											name: "陈冬敏",
											value: "cdm",

				},
										{
											name: "邹崇景",
											value: "zcj",

				}]
				}],
						},
						{
							name: "鹿城教育局",
							value: "ohjyj",
						},
						{
							name: "龙湾教育局",
							value: "ohjyj",
						}
		]
				},
key:{
	idKey:"_id"
},
				view: {
					
					enabledSelectMode: false, //关闭选中模式
					enabledDblClickExpand: true, //启用双击展开节点
					nodeFormater: function (nodeData) {
						return "<div><span class='name'>" + nodeData.name + "</span></div>";
					}
				},
				callback: {
					loadCallback: function (self) {
						//阻止双击冒泡
						self.$content.off("dblclick._stopDblclik", "[data-role='remove'],[data-role='add'],[data-role='moveUper'],[data-role='moveDowner']");
						self.$content.on("dblclick._stopDblclik", "[data-role='remove'],[data-role='add'],[data-role='moveUper'],[data-role='moveDowner']", function (event) {
							event.stopPropagation();
						});

						self.$content.off("click.nodeMoveUp", "[data-role='moveUper']");
						self.$content.on("click.nodeMoveUp", "[data-role='moveUper']", function (event) {
							stopPropagation(event);
							var $node = $(this).closest("[data-role='node']");
							self.config.action.nodeMoveUp($node, self);
						});

						self.$content.off("click.nodeMoveDown", "[data-role='moveDowner']");
						self.$content.on("click.nodeMoveDown", "[data-role='moveDowner']", function (event) {
							stopPropagation(event);
							var $node = $(this).closest("[data-role='node']");
							self.config.action.nodeMoveDown($node, self);
						});

						self.$content.off("click.nodeRemove", "[data-role='remove']");
						self.$content.on("click.nodeRemove", "[data-role='remove']", function (event) {
							stopPropagation(event);
							var $node = $(this).closest("[data-role='node']");
							self.config.action.removeNode($node, self);
						});

						self.$content.off("click.nodeAdd", "[data-role='add']");
						self.$content.on("click.nodeAdd", "[data-role='add']", function (event) {
							stopPropagation(event);
							//这里填写增加处理函数
							//得到的数据
							var data = [];
							var $node = $(this).closest("[data-role='node']");
							self.config.action.addNode($node, data, self);
						});
					},
					nodeCallback: function ($node, nodeData, self) {
						$node.addClass("clearfix");
						var $control = $("<span class='ext-move-tools right'></span>")
						var $moveUp = $("<span class='ext-move-up action' data-role='moveUper' title='上移'><i class='iconfont'>&#xe64b;</i></span>");
						var $moveDown = $("<span class='ext-move-down action' data-role='moveDowner' title='下移'><i class='iconfont'>&#xe64c;</i></span>");
						var $add = $("<span class='ext-add action' data-role='add' title='新增子菜单'><i class='iconfont'>&#xe63f;</i></span>");
						var $remove = $("<span class='ext-remove action' data-role='remove' title='删除菜单'><i class='iconfont'>&#xe61d;</i></span>");
						$node.prepend($control);

						if (nodeData.level == 0) {
							$control.append($remove, $add, $moveUp, $moveDown);
						} else {
							$control.append($remove, $moveUp, $moveDown);
						}
					}
				},
				action: {
					//节点获得焦点
					focusNode: function ($node, self) {
						$node.addClass("active");
					},
					//节点失去焦点
					blurNode: function ($node, self) {
						$node.removeClass("active");
					},
					//移除节点（仅隐藏节点，及其子节点，为隐藏节点设置一个标记，以便重置使用）
					removeNode: function ($node, self) {
						$node.addClass("waiting-remove");
						self._noder._getParentNodeContainer($node).hide();
						//移除时还需查看是否还存在兄弟节点，如果不存在，则父节点的展开标记要关闭
						var $siblingsNode = self.getSiblingsNode($node);
						if ($siblingsNode.filter(":visible").length <= 0) {
							//不存在
							self._expander._getExpander(self.getParentNode($node)).hide();
						}
					},
					//增加节点(为增加的节点设置一个标记，以便重置使用)
					addNode: function ($node, data, self) {
						//模拟插入数据
						data = [{
							id:"1111",
							name: "连插2条模拟插入",
						}, {
														id:"2222",

							name: "连插2条模拟插入",
						}];
						
						var $addNode = self.addNode(data, $node);

						if ($addNode.length > 0) {
							$addNode.addClass("waiting-reset");
							//展开这个节点
							if ($node) {
								//非根节点时，需要展开节点
								self.expandNode($node);
							}
							self.sortNode("orderId", "asc");
						}
					},
					//节点上移
					nodeMoveUp: function ($node, self) {
						var nodeData = self.getDataById($node)[0];

						//取得同节点
						var $siblingsNode = self.getSiblingsNode($node, true);

						var currentIndex = $siblingsNode.index($node);

						//如果当前节点是首节点，则不执行事件
						if (currentIndex === 0) {
							return false;
						}

						//取得上一个兄弟元素节点和数据
						var $prevNode = $siblingsNode.eq(currentIndex - 1);
						var prevNodeData = self.getDataById($prevNode)[0];

						//将双方排序的序号数据交换
						var currentOrderId = nodeData.orderId;
						var prevOrderId = prevNodeData.orderId;
						self.replaceNodeData($node, "orderId", prevOrderId);
						self.replaceNodeData($prevNode, "orderId", currentOrderId);

						self.replaceNode($node, $prevNode, true);

					},
					//节点下移
					nodeMoveDown: function ($node, self) {
						var nodeData = self.getDataById($node)[0];

						//取得兄弟节点
						var $siblingsNode = self.getSiblingsNode($node, true);
						var currentIndex = $siblingsNode.index($node);
						//如果当前节点是首节点，则不执行事件
						if (currentIndex === $siblingsNode.length - 1) {
							return false;
						}

						//取得上一个兄弟元素节点和数据
						var $nextNode = $siblingsNode.eq(currentIndex + 1);
						var nextNodeData = self.getDataById($nextNode)[0];

						//将双方排序的序号数据交换暂存到自已新的newlyorderId字段里
						var currentOrderId = nodeData.orderId;
						var nextOrderId = nextNodeData.orderId;

						self.replaceNodeData($node, "orderId", nextOrderId);
						self.replaceNodeData($nextNode, "orderId", currentOrderId);
						self.replaceNode($node, $nextNode, true);
					},

					//还原节点
					restoreNode: function (self) {
						//让隐藏的节点显示
						var $allNode = self.getAllNode();
						self._noder._getParentNodeContainer($allNode).show();
						//标记为待移除标记的节点删除标记
						$allNode.removeClass("waiting-remove");

						//删除增加的节点
						var $resetNode = $allNode.filter(".waiting-reset");

						self.removeNode($resetNode);
						//删除标记
						//恢复默认排序，并重新复制数据
						self.sortNode();
						//克隆排序
						self.config.action.cloneCloneId(self.getAllNode(), self);
					},
					//点击“编辑”按钮时，都会复制一份当前的默认排序号_orderId为新字段orderId
					cloneCloneId: function ($node, self) {
						self.replaceNodeData($node, "orderId", function (index, data) {
							return data["_orderId"];
						});
					},

					//点击“保存”按钮时，
					updateorderId: function ($node, self) {}
				}
			}

			tree = $("#tree").tree(setting);
		}

		function addListeners(argument) {
			var $liulan = $("#liulan");
			var $shengcheng = $("#shengcheng");
			var $bianji = $("#bianji");
			var $baocun = $("#baocun");
			var $chongzhi = $("#chongzhi");
			var $xinzeng = $("#xinzeng");

			//编辑事件
			$bianji.click(function () {
				//进入编辑模式，显示出操作菜单
				tree.$me.addClass("editMode");
				var $allNode = tree.getAllNode();
				$allNode.addClass("active");
				$shengcheng.hide();
				$bianji.hide();
				$liulan.hide();

				$baocun.show();
				$chongzhi.show();
				$xinzeng.show();

				//复制内置排序ID（内置排序ID字段为_orderId，底层字段，不能更改它）
				tree.config.action.cloneCloneId($allNode, tree);
			});


			//保存事件
			$baocun.click(function () {
				//tree.refreshNode(tree.getAllNode())
				//将暂存的新排序字段newlyorderId替换orderId，并删除newlyorderId
				//tree.config.action.updateorderId(tree.getAllNode(), tree);

				/*	tree.$me.removeClass("editMode");

					$bianji.show();
					$shengcheng.show();
					$liulan.show();

					$baocun.hide();
					$chongzhi.hide();
					$xinzeng.hide();*/

				//移除所有所有可删除节点
				var $removeNode = tree.getAllNode().filter(".waiting-remove");
				tree.removeNode($removeNode);

				//返回排序后的数据
				log(tree.getAllData());

			});

			//重置事件
			$chongzhi.click(function () {

				tree.config.action.restoreNode(tree);
			});


			//模拟新增加↓
			//暂存要增加的节点目标
			var $waitAddNode;

			$xinzeng.click(function () {
				//模拟要增加的节点是第一个节点
				$waitAddNode = tree.getNodeByIndex(0);

				//模拟查请求后得到的数据
				$("#xuanze").show();
				$("#xuanze").css({
					display: "block",
					position: "fixed",
					top: '50%',
					left: '50%',
					width: "300px",
					height: "100px",
					backgroundColor: "#fff",
					border: "5px solid pink"
				});
			});

			$("#quedingzengjia").click(function () {
				//$("#xuanze2").val()

				//模拟得到的的数据
				var data = [{
					name: "连插2条模拟插入",
					orderId: 1,
					}, {
					name: "连插2条模拟插入",
					orderId: 10,
					}]

				tree.config.action.addNode($waitAddNode, data, tree);

			});

		}
	</script>
</body>

</html>